.codecopy {
  @import "@primer/css/tooltips/index.scss";
  @import "@primer/css/buttons/index.scss";

  position: relative;
  overflow: visible;

  .codecopy-btn {
    @extend .btn;
    @extend .btn-sm;

    box-shadow: none;
    min-height: initial;

    transition: opacity 0.3s ease-in-out;
    opacity: 0;

    position: absolute;
    z-index: 1;

    .codecopy-btn-icon {
      border-radius: 0;
      margin-top: -3px;
      position: relative;
      top: 3px;
      padding: 0;
      vertical-align: initial;
      min-height: initial;
    }

    &:hover,
    &:focus {
      box-shadow: none;
    }
  }

  &:hover .codecopy-btn {
    opacity: 1;
  }
}

.codecopy.codecopy-small .codecopy-btn {
  padding: 2px 6px;
  right: 0;
  top: 0;
}

.codecopy.codecopy-large .codecopy-btn {
  padding: 3px 6px;
  right: 5px;
  top: 5px;
}

.codecopy.codecopy-xlarge .codecopy-btn {
  padding: 3px 6px;
  right: 30px;
  top: 10px;
}
